<script setup lang="ts">
import { password1, password2 } from '@/common/util/crypto';

const router = useRouter();
const { t } = useI18n();

const password = ref('');

// 登录
const submit = () => {
    if (!password.value) return window.msg.warning(t('password.empty'));

    const passhash = password2(password.value);
    if (passhash != useUserStore().passhash) {
        return window.msg.error(t('password.error'));
    }

    // 持久化存储锁屏状态，有效1d
    useUserStore().setPassword(password1(password.value));
    router.push({ name: 'index' });
};
</script>

<template>
    <div class="no-account-container">
        <div class="cover-top">
            <img class="logo-img" src="@/assets/images/ngklogo.png" />
        </div>
        <div class="tip">{{ $t('password.welcome') }}</div>

        <div class="px-[58px]">
          <span class="inp-txt">密码</span>
            <n-input
                v-model:value="password"
                type="password"
                show-password-on="click"
                :placeholder="$t('password.toUnlock')"
                class="w-full h-[50px] leading-[50px]"
                round
                style="border-radius: 5px;margin-bottom: 8px;background-color: #F5F5F5;"
                @keydown.enter="submit"
                :autofocus="true"
            ></n-input>

            <n-button
                class="bg-primary mt-5 w-full h-[45px] leading-[50px]"
                type="primary"
                @click="submit"
                round
                :disabled="!password"
            >
                {{ $t('password.unlock') }}
            </n-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.no-account-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;

    .cover-top {
        margin-top: 115px;
        justify-content: center;
    }

    .logo-img {
        width: 120px;
    }

    .tip {
        padding-bottom: 20px;
        padding-top: 20px;
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: #333333;
        letter-spacing: 0;
        line-height: 24px;
    }
    .inp-txt{
      display: block;
      margin-bottom: 5px;
    }
}
:deep(.n-input-wrapper){
  z-index: 20;
}
:deep(.n-input__border){
  background-color: #ecf5ff;
}
</style>
